<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="flex bg-white h-full m-15px p-2" style="border-radius: 8px">
      <div :class="{ 'w-200px': !collapsed }" style="overflow-y: auto">
        <Menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          :inline-collapsed="collapsed"
          @select="handleSelect"
          :forceSubMenuRender="true"
        >
          <MenuItem key="1">
            <template #icon>
              <CarryOutOutlined />
            </template>
            <span>我的日程</span>
          </MenuItem>

          <SubMenu
            key="2"
            @title-click.stop="handleClick('2')"
            :class="{
              'ant-menu-item-selected': selectedKeys.includes('2'),
            }"
            :forceSubMenuRender="true"
          >
            <template #icon>
              <DeploymentUnitOutlined />
            </template>
            <template #title>部门人员</template>
            <div class="w-full">
              <div style="width: 75%; margin: 0 auto">
                <CheckboxGroup
                  :list="deptUsers"
                  v-model:modelValue="deptUsersValue"
                  @change="handleCheck($event, '2')"
                  @handle-click-key="handleClick('2', true)"
                  ref="handleCheckRef2"
                  key="dept"
                />
              </div>
            </div>
          </SubMenu>
          <SubMenu
            key="3"
            @title-click="handleClick('3')"
            :class="{
              'ant-menu-item-selected': selectedKeys.includes('3'),
            }"
            :forceSubMenuRender="true"
          >
            <template #icon>
              <TeamOutlined />
            </template>
            <template #title>我关注的</template>
            <div class="w-full">
              <div style="width: 75%; margin: 0 auto">
                <CheckboxGroupFavorite
                  v-model:modelValue="favoriteValue"
                  @change="handleCheck($event, '3')"
                  @handle-click-key="handleClick('3', true)"
                  ref="handleCheckRef3"
                  key="favorite"
                />
              </div>
            </div>
          </SubMenu>
          <SubMenu
            key="4"
            @title-click="handleClick('4')"
            :class="{
              'ant-menu-item-selected': selectedKeys.includes('4'),
            }"
            :forceSubMenuRender="true"
          >
            <template #icon>
              <UserOutlined />
            </template>
            <template #title>领导日程</template>
            <div class="w-full">
              <div style="width: 75%; margin: 0 auto">
                <CheckboxGroup
                  v-model:modelValue="leadersValue"
                  :list="leaders"
                  @change="handleCheck($event, '4')"
                  @handle-click-key="handleClick('4', true)"
                  ref="handleCheckRef4"
                  key="leads"
                />
              </div>
            </div>
          </SubMenu>
          <SubMenu
            key="5"
            @title-click="handleClick('5')"
            :class="{
              'ant-menu-item-selected': selectedKeys.includes('5'),
            }"
            v-if="departmentChargeTreeList.length > 0"
            :forceSubMenuRender="true"
          >
            <template #icon>
              <GatewayOutlined />
            </template>
            <template #title>分管部门</template>
            <div class="w-full">
              <div style="width: 75%; margin: 0 auto">
                <DepartmentCharge
                  v-model:modelValue="departmentChargeValue"
                  :list="departmentChargeTreeList"
                  @change="handleCheck($event, '5')"
                  @handle-click-key="handleClick('5', true)"
                  ref="handleCheckRef5"
                  key="departmentCharge"
                />
              </div>
            </div>
          </SubMenu>
        </Menu>
      </div>
      <div
        class="schedule_view_style"
        :style="{ width: `calc(100% - ${!collapsed ? '200px' : '0px'})` }"
      >
        <ScheduleView ref="scheduleViewRef" />
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { defineComponent, onMounted, ref, reactive, toRefs, toRef, provide, nextTick } from 'vue';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { Menu } from 'ant-design-vue';
  import {
    UserOutlined,
    CarryOutOutlined,
    DeploymentUnitOutlined,
    TeamOutlined,
    GatewayOutlined,
  } from '@ant-design/icons-vue';
  import ScheduleView from './modules/scheduleView/ScheduleView.vue';
  import { getUserGetDeptUsers, getUserListLeaders } from '/@/api/administration/administration';
  import CheckboxGroup from './modules/checkboxGroup/index.vue';
  import CheckboxGroupFavorite from './modules/checkboxGroupFavorite/index.vue';
  import DepartmentCharge from './modules/departmentCharge/index.vue';
  import { getDepartmentGetTreesManaged } from '/@/api/system/system';

  export default defineComponent({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'schedule',
    components: {
      PageWrapper,
      Menu,
      MenuItem: Menu.Item,
      SubMenu: Menu.SubMenu,
      UserOutlined,
      CarryOutOutlined,
      DeploymentUnitOutlined,
      TeamOutlined,
      ScheduleView,
      CheckboxGroup,
      CheckboxGroupFavorite,
      DepartmentCharge,
      GatewayOutlined,
    },
    setup() {
      // const { createMessage } = useMessage();
      const scheduleViewRef = ref<any>(null);
      const deptUsers = ref<Recordable[]>([]);
      const leaders = ref<Recordable[]>([]);
      const departmentChargeTreeList = ref<Recordable[]>([]);
      const handleCheckRef2 = ref<any>(null);
      const handleCheckRef3 = ref<any>(null);
      const handleCheckRef4 = ref<any>(null);
      const handleCheckRef5 = ref<any>(null);
      onMounted(() => {
        init();
      });
      const init = () => {
        getUserGetDeptUsers().then((res) => {
          deptUsers.value = res.list || [];
          deptUsers.value.forEach((item) => {
            item.label = item.realName;
            item.value = item.name;
          });
        });
        getUserListLeaders().then((res) => {
          leaders.value = res || [];
          leaders.value.forEach((item) => {
            item.label = item.realName;
            item.value = item.name;
          });
        });
        getDepartmentGetTreesManaged().then((res) => {
          departmentChargeTreeList.value = res || [];
        });
      };
      const openKeys = ref<string[]>([]);
      const state = reactive({
        collapsed: false,
        selectedKeys: ['1'],
        preOpenKeys: [],
      });
      const toggleCollapsed = () => {
        state.collapsed = !state.collapsed;
        openKeys.value = state.collapsed ? [] : state.preOpenKeys;

        scheduleViewRef.value?.updateSize();
      };
      provide('toggleCollapsed', toggleCollapsed);
      provide('collapsed', toRef(state, 'collapsed'));

      const handleSelect = (e) => {
        const { key } = e;
        setDay(key);
      };
      const selectUsers = ref('');
      const deptUsersValue = ref('');
      const leadersValue = ref('');
      const favoriteValue = ref('');
      const departmentChargeValue = ref('');

      const setDay = async (key) => {
        await nextTick();
        const { setUsersData } = scheduleViewRef.value;
        switch (key) {
          case '1':
            selectUsers.value = '';
            setUsersData(key, selectUsers.value);
            break;
          case '2':
            if (openKeys.value.length == 0) return;
            selectUsers.value = deptUsersValue.value;
            await setUsersData(key, selectUsers.value);
            break;
          case '3':
            if (openKeys.value.length == 0) return;
            selectUsers.value = favoriteValue.value;
            await setUsersData(key, selectUsers.value);
            break;
          case '4':
            if (openKeys.value.length == 0) return;
            selectUsers.value = leadersValue.value;
            await setUsersData(key, selectUsers.value);
            break;
          case '5':
            if (openKeys.value.length == 0) return;
            selectUsers.value = departmentChargeValue.value;
            await setUsersData(key, selectUsers.value);
            break;
        }
      };
      const handleCheck = (val, type) => {
        console.log('handleCheck-', val);
        selectUsers.value = val.join(',');
        setDay(state.selectedKeys[0]);
      };

      const handleClick = async (val, bool = false) => {
        console.log('openKeys', openKeys.value);
        console.log('handleClick111', val);
        await nextTick();
        console.log('openKeys2', openKeys.value);
        if (openKeys.value.includes(val) || bool) {
          state.selectedKeys = [val];
          setDay(val);
        }
      };
      return {
        ...toRefs(state),
        toggleCollapsed,
        scheduleViewRef,
        handleSelect,
        deptUsers,
        leaders,
        departmentChargeTreeList,
        handleCheck,
        handleClick,
        handleCheckRef2,
        handleCheckRef3,
        handleCheckRef4,
        handleCheckRef5,
        openKeys,
        deptUsersValue,
        leadersValue,
        favoriteValue,
        departmentChargeValue,
      };
    },
  });
</script>
<style lang="less" scoped>
  .schedule_view_style {
    height: calc(100vh - 82px);
    overflow-y: auto;
  }

  :deep(.ant-menu-item) {
    &::after {
      opacity: 0;
    }
  }
</style>
